<script setup lang="ts">
import AuthStatus from './AuthStatus.vue';

const userStore = useUserStore();
const statusText = computed(() => {
  return userStore.verified?.email ? $t('cpynOUwHi5LdYcuwQgxn') : $t('dmrsfAx2OeQlQd1A5QKak');
});
</script>

<template>
  <TCard
    class="text-sm" :title="$t('ph7eJFfBmsn7xFyvj8')"
    bodyClass="flex flex-col text-sys-text-body gap-2"
  >
    <template #action>
      <AuthStatus :authed="userStore.verified?.email">
        {{ statusText }}
      </AuthStatus>
    </template>

    <div>{{ $t('0GqSscz3ka6jH5KbpMFhy') }}</div>

    <AButton
      v-if="userStore.verified?.email"
      class="ant-cover__Button-3d-green mt-auto" block
      type="primary" @click="openAuthFlowPopup('updatePassword')"
    >
      {{ $t('xp0UrsknjTuG_6Sy5p2K') }}
    </AButton>
    <AButton
      v-else
      class="ant-cover__Button-3d-primary mt-auto" block
      type="primary" @click="openAuthFlowPopup('setPassword')"
    >
      {{ $t('9xv5aRPfQ5Wzl2YHe3Tkv') }}
    </AButton>
  </TCard>
</template>
